<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      看点
      <image src="https://pic.bangbangtongcheng.com/static/sousuo.png" mode="widthFix" @click="sousuo" />
    </view>
    <!-- <view class="title">
      <view style="left: 0rpx" :class="xuanIndex == -1 ? 'xuan' : ''" @click="xuan(-1)">
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="xuanIndex == -1" />全部
      </view>
      <view style="left: 124rpx" :class="xuanIndex == 0 ? 'xuan' : ''" @click="xuan(0)">
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="xuanIndex == 0" />楼市动向
      </view>
      <view style="left: 312rpx" :class="xuanIndex == 1 ? 'xuan' : ''" @click="xuan(1)">
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="xuanIndex == 1" />动态资讯
      </view>
    </view>-->
    <scroll-view scroll-x style="padding-top: 6rpx" class="bg-white nav " scroll-with-animation
      :scroll-left="scrollLeft">
      <view class="cu-item view" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in list"
        :key="index" @tap="tabSelect" :data-index="index" :data-id="item.valueNum">
        {{ item.name || item.valueName }}
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="TabCur == index" />
      </view>
    </scroll-view>
	<!-- :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 60px - 48px-88rpx)'" -->
    <scroll-view scroll-y class="list scroll-view-wrap" 
      @scrolltolower="down" refresher-background="#f5f5f5">
      <view class="li" v-for="(item, index) in WatchList" :key="index" @click="details(item.id)">
        <image mode="aspectFit" :src="imgUrl + item.image" />
        <view class="li_1">
          <view class="tit">{{ item.title }}</view>
          <view class="shijian">
            <span style="margin-right: 14rpx">{{ item.author }}</span>
            <span>{{ item.createDate }}</span>
          </view>
        </view>
      </view>
      <view v-if="WatchList.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="WatchList.length && !downStatus">没有更多了</view>
    </scroll-view>
    <view v-if="scrollTop>0" class="hui" @click="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <view-tabbar :selected="1"></view-tabbar>
	<uniBall></uniBall>
  </view>
</template>

<script>
  import Tabbar from "@/components/tabbar.vue";

  import {
    mapGetters
  } from "vuex";
  let statusBarHeight;
  //#ifdef H5
  import wxshare from "../../utils/index.js";
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
  //  #endif
  export default {
    data() {
      return {
        statusBarHeight,
        xuanIndex: -1,
        list: [{
          num: 1,
          name: "全部",
          valueNum: ""
        }],
        TabCur: 0,
        scrollLeft: 0,
        id: "",
        WatchList: [],
        imgUrl: this.$imgSrc,
        showType: false,
        orderSort: "1",
        scrollTop: "0",
        trigger: false,
        downStatus: true,
        upStatus: true,
        pageSize: 10,
        pageNo: 1
      };
    },
    components: {
      "view-tabbar": Tabbar
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },
    onLoad(options) {
      uni.hideTabBar();
      this.getType();
      this.getWatch();
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
    },
    async onPullDownRefresh() {
      this.WatchList = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getWatch();
      }
    },
    methods: {
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.jinzhifx(re.data);
          }
        });
      },
      sousuo() {
        // if (!this.userinfo.phone) {
        //   uni.showToast({
        //     title: "请登录",
        //     icon: "none",
        //     mask: true
        //   });
        //   return;
        // }
        uni.navigateTo({
          url: "/pages_search/search?searchlogType=4"
        });
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ["hideMenuItems"]
        });
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:QZone",
            "menuItem:openWithSafari"
          ]
        });
      },
      totop() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
      },
      xuan(index) {
        this.xuanIndex = index;
      },
      getType() {
        this.$myRequest
          .get("/mob/home/getDictionaries", {
            pageNo: 1,
            pageSize: 10,
            type: 13
          })
          .then(res => {
            this.list = this.list.concat(res.list);
          });
      },
      down() {
        if (this.downStatus) {
          this.pageNo++;
          this.getWatch();
        }
      },
      async up() {
        this.WatchList = [];
        this.pageNo = 1;
        this.downStatus = true;
        if (this.upStatus) {
          this.trigger = true;
          await this.getWatch();
        }
      },
      getWatch() {
        this.upStatus = false;
        this.$myRequest
          .get("/mob/home/getWatch", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            auditStatus: 2,
            type: this.id
          })
          .then(res => {
            if (!res.list.length) {
              this.downStatus = false;
            } 
            this.upStatus = true;
            this.trigger = false;
            this.WatchList = this.WatchList.concat(res.list);
			
            uni.stopPullDownRefresh();
          });
      },
      async tabSelect(e) {
        this.id = e.currentTarget.dataset.id;
        if (this.TabCur == e.currentTarget.dataset.index) {
          return;
        }
        this.TabCur = e.currentTarget.dataset.index;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
        this.WatchList = [];
        this.pageNo = 1;
        this.downStatus = true;
        if (this.upStatus) {
          await this.getWatch();
        }
      },
      details(id) {
        uni.navigateTo({
          url: "/pages_index/Watch/details?id=" + id
        });
      }
    },
    mounted() {}
  };
</script>

<style lang='less' scoped>
	.scroll-view-wrap{
		/* #ifdef MP  */
		height: calc(
		  100vh - 96rpx - var(--status-bar-height) - 88rpx - 5px - 22px - 164rpx
		);
		/* #endif */
		/* #ifdef H5 || APP-PULS */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 88rpx - 5px - 164rpx);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 88rpx - 5px - 164rpx);
		/* #endif */
	}
  .box {
    width: 100%;
    /* padding-bottom: 120rpx; */
    background-color: #fff;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
	
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);
    
    image {
    	width: 46rpx;
    	height: 46rpx;
    	margin-right: 18rpx;
    }
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
     line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      right: 30rpx;
      // top: 28rpx;
      /* #ifdef MP  */
      // top:100%;
      /* #endif */
      /* #ifdef H5 || APP-PULS */
      // top: 30rpx;
      /* #endif */
      // #ifdef APP
      // top: 50%;
      // #endif
      /* #ifdef MP-WEIXIN */
      // top: 65%;
      /* #endif */
	  // #ifdef MP-WEIXIN
	  // top: auto;
	 
	  left: 30rpx;
	  // #endif
	   bottom: 14rpx!important;
	 
    }
  }

  .view {
    position: relative;
    font-size: 32rpx;
    border: 0;
    color: #333333;
    margin-right: 0;

    image {
      position: absolute;
      width: 44rpx;
      height: 24rpx;
      top: 66rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }

  .title {
    position: relative;
    margin-top: 28rpx;
    margin-left: 30rpx;

    view {
      position: absolute;
      top: 0;
      font-size: 32rpx;

      image {
        position: absolute;
        width: 44rpx;
        height: 24rpx;
        top: 44rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .xuan {
      transform: scale(1.1);
      color: #64b6a8;
    }
  }

  .list {
    margin-top: 30rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .li {
      width: 100%;
      height: 200rpx;
      margin-bottom: 24rpx;

      image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;
        height: 200rpx;

        .tit {
          width: 366rpx;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; //想要的行数
          -webkit-box-orient: vertical;
          min-height: 138rpx;
        }

        .shijian {
          position: absolute;
          bottom: 4rpx;
          font-size: 26rpx;
        }
      }
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>